<script setup lang="ts">


import { ref, onMounted } from 'vue';
import { CarryOutOutlined, SmileTwoTone } from '@ant-design/icons-vue';
import type { TreeProps } from 'ant-design-vue';
import { DownOutlined, LoginOutlined, DeleteOutlined, AlignCenterOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue';
// // import {
// LoginOutlined
// } from '@ant-design/icons-vue';


const showLine = ref<boolean>(true);
const showIcon = ref<boolean>(true);
const treeData = ref<TreeProps['treeData']>([
  {
    title: '威海热电集团',
    key: '0-0',
    children: [
      {
        title: '初村北站',
        key: '0-0-0',
        children: [
          {
            title: '初村',
            key: '0-0-0-1',
          }
        ]
      },
      {
        title: '界石',
        key: '0-0-4',
        children: [
          {
            title: '界石东线',
            key: '0-0-4-0',
          },
          {
            title: '界石西线',
            key: '0-0-4-1',
          },
          {
            title: '界石北线',
            key: '0-0-4-2',
          },
          {
            title: '界石南线',
            key: '0-0-4-3',
          },
        ]
      },
      {
        title: '初张线',
        key: '0-0-1',
        children: [
          {
            title: '初张',
            key: '0-0-1-0',
          },
        ]
      },
      {
        title: '初汪线',
        key: '0-0-2',
        children: [
          {
            title: '初汪线东',
            key: '0-0-2-0',
          },
        ]
      },
      {
        title: '初村东线',
        key: '0-0-3',
        children: [
          {
            title: '初村',
            key: '0-0-3-0',
          },
        ]
      },

      {
        title: '魏桥线',
        key: '0-0-5',
        children: [
          {
            title: '魏桥',
            key: '0-0-5-0',
          },
        ]
      },
      {
        title: '华能厂高温水',
        key: '0-0-6',
        children: [
          {
            title: '华能厂',
            key: '0-0-6-0',
          },
        ]
      },
      {
        title: '文登东线',
        key: '0-0-7',
        children: [
          {
            title: '文登',
            key: '0-0-7-0',
          },
        ]
      },
      {
        title: '空气源热泵',
        key: '0-0-8',
        children: [
          {
            title: '空气源热泵',
            key: '0-0-8-0',
          },
        ]
      },
      {
        title: '市区公司南线',
        key: '0-0-9',
        children: [
          {
            title: '市区公司',
            key: '0-0-9-0',
          },
        ]
      },
      {
        title: '市区公司北线',
        key: '0-0-10',
        children: [
          {
            title: '市区公司',
            key: '0-0-10-0',
          },
        ]
      },
    ],
  }
]);
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info);
};


const rowSelection: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
  selectedRowKeys: ["3", "2", "4", "6", "5"]
};

// ========================================== 展会 table | S

const columns = [
  {
    name: '任务名称',
    dataIndex: '1',
    key: 'name',
    ellipsis: true,

  },
  {
    title: '任务内容',
    dataIndex: '2',
    key: '1',
    ellipsis: true,

  },
  {
    title: '项目名称',
    dataIndex: '3',
    key: '2',
    ellipsis: true,

  },
  {
    title: '回路名称',
    key: '3',
    dataIndex: '4',
    ellipsis: true,

  },
  {
    title: '开始日期',
    key: '4',
    dataIndex: '5',
    ellipsis: true,

  },
  {
    title: '结束日期',
    key: '5',
    dataIndex: '6',
    ellipsis: true,

  },
  {
    title: '巡检周期',
    key: '6',
    dataIndex: '7',
    ellipsis: true,

  },
  {
    title: '巡检人',
    key: '7',
    dataIndex: '8',
    ellipsis: true,

  },
  {
    title: '巡检组长',
    key: '8',
    dataIndex: '9',
    ellipsis: true,

  },
  // {
  //   title: 'Action',
  //   key: 'action',
  //   dataIndex: '10',
  // },
];

const data = [
  {
    key: '1',
    "1": '查验设备维护情况',
    "2": '定期查看',
    "3": '电工集团',
    "4": '22',
    "5": ['2024-10-08'],
    "6": ['2024-10-15'],
    "7": ['日'],
    "8": ['旭锦信安科技'],
    "9": ['演示账号'],
  },
  {
    key: '2',
    "1": '冷却泵运行状态',
    "2": '查看冷水泵',
    "3": '电工集团',
    "4": '水泵房',
    "5": ['2024-10-07'],
    "6": ['2024-10-20'],
    "7": ['周'],
    "8": ['旭锦信安科技'],
    "9": ['旭锦信安科技'],
  },
  {
    key: '3',
    "1": '检查设备耗能',
    "2": '查看主机运行情况',
    "3": '电工集团',
    "4": '行政_小组',
    "5": ['2024-09-30'],
    "6": ['2024-09-30'],
    "7": ['日'],
    "8": ['旭锦信安科技'],
    "9": ['旭锦信安科技'],
  },
  {
    key: '4',
    "1": '检查设备耗能',
    "2": '查看主机运行情况',
    "3": '电工集团',
    "4": '行政_小组',
    "5": ['2024-09-30'],
    "6": ['2024-09-30'],
    "7": ['日'],
    "8": ['旭锦信安科技'],
    "9": ['旭锦信安科技'],
  },
  {
    key: '5',
    "1": '检查设备耗能',
    "2": '查看主机运行情况',
    "3": '电工集团',
    "4": '行政_小组',
    "5": ['2024-09-30'],
    "6": ['2024-09-30'],
    "7": ['日'],
    "8": ['旭锦信安科技'],
    "9": ['旭锦信安科技'],
  },

  {
    key: '6',
    "1": '检查设备耗能',
    "2": '查看主机运行情况',
    "3": '电工集团',
    "4": '行政_小组',
    "5": ['2024-09-30'],
    "6": ['2024-09-30'],
    "7": ['日'],
    "8": ['旭锦信安科技'],
    "9": ['旭锦信安科技'],
  },
];

// ================================================= 展会 tabel | E


const loading = ref(true)
onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 2000)
})

</script>

<template>
  <a-row :gutter="10">
    <a-col :span="5">
      <a-card :headStyle="{
        background: '#f5f5f5',
        paddingLeft: '5px',
        paddingRight: '5px',
      }" hoverable :loading="loading"
        style="position: relative;left: -0px; border-radius: 3px; overflow: hidden; width: 100%; height: 100%; overflow: hidden; box-shadow: 0 0 0px rgba(0, 0, 0, .2);">
        <template #title>
          <div style="">
            <a-input-search style="margin: 20px 0; width: 100%;" v-model:value="value" placeholder="输入站点名称"
              @search="onSearch" />
          </div>
        </template>
        <a-tree  style=" position: relative; left: -10px; background: transparent;" :show-line="true" 
          :default-expanded-keys="['0-0-0', '0-0-4']" :tree-data="treeData" @select="onSelect">
          <template #title="{ dataRef }">
            <img src="@/assets/images/cont_logo.png" style="width: 15px; height: 15px; margin-right: 10px;">
            {{ dataRef.title }}
          </template>
          <!-- <template #switcherIcon>
            <img src="@/assets/images/cont_logo.png" style="width: 15px; height: 15px; margin-right: 10px;">
          </template> -->
        </a-tree>
<!-- 
        <a-tree 
        :default-expanded-keys="['0-0-0', '0-0-4']"
        style=" position: relative; left: -10px; background: transparent;"  v-model:selectedKeys="selectedKeys" :tree-data="treeData" default-expand-all>
          <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
          <template #title="{ dataRef }">
            <img src="@/assets/images/cont_logo.png" style="width: 15px; height: 15px; margin-right: 3px;">
            {{ dataRef.title }}
          </template>
          <template #icon="{ key, selected }">
            <template v-if="key === '0-0'">
              <smile-outlined />
            </template>
            <template v-else-if="key === '0-0-0'">
              <smile-outlined />
            </template>
            <template v-else>
              <frown-filled v-if="selected" />
              <frown-outlined v-else />
            </template>
          </template>
        </a-tree> -->
      </a-card>
    </a-col>
    <a-col :span="19">
      <a-card hoverable :loading="loading" style="height: 100%;">
        <template #title>
          <div style="margin: 20px 0; width: 100%;">
            <a-space wrap>
              <a-select placeholder="选择科室" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">一科</a-select-option>
                <a-select-option value="lucy">二科</a-select-option>
                <a-select-option value="disabled">三科</a-select-option>
              </a-select>

              <a-select placeholder="选择支线" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">高温水线</a-select-option>
                <a-select-option value="lucy">市区北线</a-select-option>
                <a-select-option value="1">市区南线</a-select-option>
                <a-select-option value="Yiminghe">初张线路</a-select-option>
              </a-select>

              <a-select placeholder="站房类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">板换站</a-select-option>
                <a-select-option value="lucy">混水站</a-select-option>
                <a-select-option value="Yiminghe">直供站</a-select-option>
              </a-select>

              <a-select placeholder="管理类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">自管站</a-select-option>
                <a-select-option value="lucy">统管站</a-select-option>
              </a-select>


              <a-select placeholder="建筑类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">办公类</a-select-option>
                <a-select-option value="lucy">商超类</a-select-option>
                <a-select-option value="1">酒店类</a-select-option>
                <a-select-option value="3">工厂类</a-select-option>
                <a-select-option value="2">医院类</a-select-option>
                <a-select-option value="4">学校类</a-select-option>
                <a-select-option value="5">其它</a-select-option>
              </a-select>

              <a-select placeholder="节能类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">非节能建筑</a-select-option>
                <a-select-option value="lucy">一步节能</a-select-option>
                <a-select-option value="Yiminghe">二步节能</a-select-option>
                <a-select-option value="1">三步节能</a-select-option>
                <a-select-option value="2">四步节能</a-select-option>
              </a-select>

              <a-select placeholder="收费类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">面积法</a-select-option>
                <a-select-option value="lucy">一部制</a-select-option>
                <a-select-option value="Yiminghe">二部制</a-select-option>
              </a-select>

              <a-select placeholder="负荷类型" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">片暖50W</a-select-option>
                <a-select-option value="lucy">片暖45</a-select-option>
                <a-select-option value="Yiminghe">地暖45W</a-select-option>
                <a-select-option value="1">风盘50</a-select-option>
                <a-select-option value="2">其它</a-select-option>
              </a-select>

              <a-select placeholder="采暖方式" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">地暖</a-select-option>
                <a-select-option value="lucy">片暖</a-select-option>
                <a-select-option value="Yiminghe">风盘</a-select-option>
              </a-select>


              <a-select placeholder="运行参数筛选" ref="select" style="width: 120px" @focus="focus" @change="handleChange">
                <a-select-option value="jack">回水温度</a-select-option>
                <a-select-option value="lucy">单位面积流量</a-select-option>
                <a-select-option value="Yiminghe">运行单耗</a-select-option>
                <a-select-option value="1">运行热负荷</a-select-option>
              </a-select>

              <a-input-search v-model:value="value" placeholder="输入任务名称" @search="onSearch" />

              <a-button type="primary" danger>
                <DeleteOutlined />重 置
              </a-button>
            </a-space>
          </div>
        </template>
        <div>

          <a-row justify="space-between">
            <a-space>
              <a-button type="primary">控制策略
                <DownOutlined />
              </a-button>
              <a-button type="primary">目标设定
                <DownOutlined />
              </a-button>
              <a-button type="primary">分时设置
                <AlignCenterOutlined />
              </a-button>
              <a-button type="primary" danger>指令下发
                <CloudDownloadOutlined />
              </a-button>
              <a-button type="primary">报警设置
                <AlignCenterOutlined />
              </a-button>
            </a-space>


            <!-- import {
LoginOutlined
} from '@ant-design/icons-vue'; -->
            <a-space>
              <a-button ghost type="primary">
                <LoginOutlined /> GIS地图
              </a-button>
              <a-button ghost type="primary">
                <LoginOutlined />阀门量程表
              </a-button>
              <!-- <a-button  type="primary">历史数据导出</a-button>
              <a-button  type="primary" danger>列表字段设置</a-button> -->
            </a-space>
          </a-row>

          <a-table :row-selection="rowSelection" style="margin-top: 10px; width: 100%;" bordered :columns="columns"
            :data-source="data">
            <template #headerCell="{ column }">
              <template v-if="column.key === 'name'">
                <span>
                  <smile-outlined />
                  任务名称
                </span>
              </template>
            </template>

            <!-- <template #bodyCell="{ column, record }"> -->
            <!-- <template v-if="column.key === 'name'">
                <a>
                  {{ record.name }}
                </a>
              </template>
        <template v-else-if="column.key === 'tags'">
                <span>
                  <a-tag v-for="tag in record.tags" :key="tag"
                    :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                    {{ tag.toUpperCase() }}
                  </a-tag>
                </span>
              </template> -->
            <template if="column.key === 'action'">
              <span>
                <a>Invite 一 {{ record.name }}</a>
                <a-divider type="vertical" />
                <a>Delete</a>
                <a-divider type="vertical" />
                <a class="ant-dropdown-link">
                  More actions
                  <down-outlined />
                </a>
              </span>
            </template>
            <!-- </template> -->
          </a-table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>


<style scoped lang="less">
:deep(.ant-card) {
  border-radius: 0px !important;
}

:deep(.ant-card-header) {
  border-radius: 10px 3px 3px 10px !important;
  background: #f0f2f5 !important;
}

:deep(.ant-card-body) {
  border-radius: 3px !important;
}
</style>